<template>
  <div class="wrapper">
    <a-upload
      class="imgup"
      accept="image/*"
      :showUploadList="false"
      name="file"
      :multiple="false"
      :action="$api.upload"
      :data="postData"
      :beforeUpload="beforeUpload"
      @change="handleChange"
    >
      <a-button><a-icon type="picture" /> </a-button>
    </a-upload>
    <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption">
    </quill-editor>
  </div>
</template>

<script>
import { getToken } from "@/tool/qiniu";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
const toolbarOptions = [
  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
  [{ list: "ordered" }, { list: "bullet" }], //列表
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
  [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
  [{ font: [] }], //字体
  [{ align: [] }], //对齐方式
  ["image"] //上传图片、上传视频
];
export default {
  name: "index",
  components: {
    quillEditor
  },
  props: {
    defaultValue: {
      type: String
    }
  },
  data() {
    return {
      postData: {
        token: ""
      },
      content: "",
      editorOption: {
        placeholder: "",
        theme: "snow",
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function(value) {
                if (value) {
                  document.querySelector(".imgup input").click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      }
    };
  },
  methods: {
    getContent() {
      return this.content;
    },
    beforeUpload(file) {
      let timestamp2 = new Date().getTime();
      let typeArr = file.name.split(".");
      let type = typeArr[typeArr.length - 1];
      let savekey = "amusement/" + timestamp2 + "." + type;
      this.postData.token = getToken(savekey);
    },
    handleChange(info) {
      if (info.file.status === "done") {
        let quill = this.$refs.myQuillEditor.quill;
        let length = quill.getSelection().index;
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(
          length,
          "image",
          this.$api.picPre + info.file.response.key
        );
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else if (info.file.status === "error") {
        this.$notification.error({
          message: "图片插入失败"
        });
      }
    }
  },
  watch: {
    defaultValue(val) {
      this.content = val;
    }
  }
};
</script>

<style scoped lang="less">
.wrapper {
  position: relative;
  .imgup {
    position: absolute;
    right: 8px;
    line-height: 58px;
    visibility: hidden;
  }
}
</style>
